<template>
	<view class="spacePage">
		<space-header :userIfon="userIfon" @follow="follow" />
		<!-- tab -->
		<view class="tab">
			<view @tap="changeTab(index)" :class="tabBarsIndex === index ? 'tabActive':''" v-for="(item,index) in tabBars" :key="index">{{item.name}}</view>
		</view>
		<view class="homePagePostDynamic">
			<swiper class="swiper" :duration="150" circular :current="tabBarsIndex" @change="onChangeTab">
				<!-- 主页 -->
				<swiper-item class="swiperItem">
					<scroll-view scroll-y class="swiperView" @scrolltolower="loadmore(index)">
						<home-page :homePageData="homePageData" />
					</scroll-view>
				</swiper-item>
				<!-- 帖子 -->
				<swiper-item class="swiperItem">
					<scroll-view scroll-y class="swiperView">
						<block v-for="(items,indexs) in list" :key="indexs">
							<common-list :item="items" :index="indexs" @follow="follows" @doSupport="doSupport" />
							<divider />
						</block>
					</scroll-view>
				</swiper-item>
				<!-- 动态 -->
				<swiper-item class="swiperItem">
					<scroll-view scroll-y class="swiperView" @scrolltolower="loadmore(index)">
						<dynamic :dynamicData="dynamicData" />
					</scroll-view>
				</swiper-item>

			</swiper>
		</view>
		<!-- 弹出层 -->
		<uni-popup ref="popup" type="top">
			<view hover-start-time=15 hover-stay-time=200 hover-class="bgcolor" class="sousuo" @tap="sousuoEvent"><text class="iconfont icon-sousuo"></text>加入黑名单</view>
			<view hover-start-time=15 hover-stay-time=200 hover-class="bgcolor" class="shanchu" @tap="shanchuEvent"><text class="iconfont icon-shanchu"></text>聊天</view>
		</uni-popup>
	</view>
</template>

<script>
	import spaceHeader from "@/components/user/space-header.vue";
	import homePage from "@/components/user/home-page.vue";
	import dynamic from "@/components/user/dynamic.vue";
	import commonList from "@/components/common/common-list.vue";
	import uniBadge from "@/components/uni-badge/uni-badge";
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	export default {
		components: {
			spaceHeader,
			homePage,
			dynamic,
			commonList,
			uniBadge,
			uniPopup
		},
		onLoad() {
			// 得到用户信息
			this.getUserIfon();
			// 得到主页的数据
			this.getHomePageData();
			// 得到帖子的数据
			this.getPost();
			// 得到动态的数据
			this.getDynamic();
		},
		data() {
			return {
				// tab(头部导航栏的内容)
				tabBarsIndex: 0, //当前默认选中tab
				tabBars: [{
					name: "主页",
				}, {
					name: "帖子",
				}, {
					name: "动态",
				}],


				// 用户信息
				userIfon: null,
				// 主页
				homePageData: null,
				// 帖子
				list: [],
				// 动态
				dynamicData: null,
			};
		},
		onNavigationBarButtonTap() {
			this.$refs.popup.open();
		},
		methods: {
			changeTab(index) {
				this.tabBarsIndex = index;
			},
			// 滚动监听
			onChangeTab(e) {
				this.changeTab(e.detail.current);
			},
			follow() {
				console.log(`回到那个`);
			},
			// 滚动加载更多内容
			loadmore() {},

			// 得到用户信息数据
			getUserIfon() {
				this.userIfon = {
					headPortrait: "https://picsum.photos/180/180?random=2",
					giveThumbsUp: 1,
					follow: 4,
					fans: 10
				};
			},
			// 得到主页的数据
			getHomePageData() {
				this.homePageData = {
					accountNumberAge: 12,
					accountNumberID: 18970,
					personal: [{
						type: "星座",
						content: "天蝎座"
					}, {
						type: "职业",
						content: "IT"
					}, {
						type: "故乡",
						content: "中国"
					}, {
						type: "感情",
						content: "未婚"
					}]
				};
			},

			// 得到帖子的数据
			async getPost() {
				let res = await uniCloud.callFunction({
					name: "index",
					data: {
						method: "add"
					}
				});
				this.list = res.result.data;
			},
			follows(e) {
				this.list[e].follow = true;
				uni.showToast({
					title: "关注成功了",
					icon: "none"
				})
			},
			doSupport(e) {
				// 拿到当前对象
				let item = this.list[e.index];
				let msg = e.type === "support" ? "顶" : "踩";
				// 之前没有操作过的
				if (item.support.type === "") {
					item.support[e.type + '_count']++;
				} else if (item.support.type === "support" && e.type === "unsupport") {
					// 之前顶了
					// 顶 -1
					item.support.support_count--;
					// 踩 +1
					item.support.unsupport_count++;
				} else if (item.support.type === "unsupport" && e.type === "support") {
					// 之前踩了
					// 顶 +1
					item.support.support_count++;
					// 踩 -1
					item.support.unsupport_count--;
				};

				item.support.type = e.type;
				uni.showToast({
					title: `${msg}成功`,
					icon: "none",
					duration: 0.3 * 1000
				})
			},
			// 得到动态的数据
			getDynamic() {
				this.dynamicData = null;
			},

			// 弹出层的事件
			sousuoEvent() {
				// 清除完后，关闭弹出层
				this.$refs.popup.close();
				// 跳转到搜索的页面
				uni.navigateTo({
					url: `../../search/search?type=news`
				})
			},
			shanchuEvent() {
				// 清除完后，关闭弹出层
				this.$refs.popup.close();
			},
		},
	}
</script>

<style lang="scss">
	// tab
	.tab {
		@include flexCenterCenter;
		height: 90rpx;

		>view {
			letter-spacing: 10rpx;
			flex: 1;
			text-align: center;
		}

		.tabActive {
			@include fontMainColor;
			font-size: 1.08rem;
			font-weight: bolder;

			>text {
				font-size: 0.9rem;
			}
		}
	}

	// 底部滚动
	.homePagePostDynamic {
		height: calc(100% - 300rpx - 90rpx);

		.swiperView {
			height: 100%;
			padding-bottom: 15rpx;
		}
	}

	// 弹出层
	.sousuo,
	.shanchu {
		width: 100vw;
		background-color: #FFFFFF;
		padding: 30rpx 0rpx;
		@include flexCenterCenter;

		>text {
			margin-right: 20rpx;
		}
	}

	.sousuo {
		border-bottom: 2rpx solid #D7D7D7;
	}

	.shanchu {
		border-radius: 0rpx 0rpx 20rpx 20rpx;

		>text {
			color: #D81E06;
		}
	}
</style>
